<template>
	<view class="nav">
		<view :style="'height:'+statusHeight+'rpx;'"></view>
		<view class="navbar" :style="'height:'+navHeight+'rpx;'">
			<view class="back-icon" v-if="pages > 1" @click="back()">
				<image class="back-icon-image" src="../../static/tabbar/back.png"></image>
			</view>
			<view class="nav-title" v-if="titleText">
				<view :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'">{{titleText}}</view>
			</view>
		</view>
		<view class="line"></view>
	</view>
	
	<view class="space" :style="'height:'+space+'rpx'"></view>
</template>

<script setup>
	import { onBeforeMount,ref ,defineProps, reactive} from 'vue';
	
	onBeforeMount(()=>{
		setNavSize()
	})
	const props =defineProps({
		titleText:{
			type:String,
			default:''
		}
	})
	//状态栏高度
	const statusHeight = ref(0)
	//内容高度
	const navHeight =ref(0)
	//导航栏包装高度
	const space = ref(0)
	//页面栈数量
	const pages =ref(getCurrentPages().length)
	//计算状态栏高度
	const setNavSize = ()=>{
		//状态栏高度
		const statusBarHeight=uni.getSystemInfoSync().statusBarHeight
		statusHeight.value = statusBarHeight *2
		//胶囊数据
		const { top , height } = wx.getMenuButtonBoundingClientRect();
		//内容高度
		navHeight.value = (height+(top-statusBarHeight)+5)*2
		//导航栏包装高度
		space.value =statusHeight.value + navHeight.value;
	}
	const back = ()=>{
		if(pages.value >1){
			uni.navigateBack()
		}else{
			uni.switchTab({
				url:"/pages/index/index"
			})
		}
		
		
	}
</script>

<style>
	.nav{
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: #FFFFFF;
	}
	.navbar{
		display: flex;
		align-items: center;
		margin-left: 40rpx;
	}
	.nav-title{
		display: flex;
		font-size: 38rpx;
		color: #333333;
	}
	.back-icon{
		width: 36rpx;
		height: 36rpx;
		margin-right: 14rpx;
	}
	.back-icon-image{
		width: 36rpx;
		height: 36rpx;
	}
	.line{
		height: 2rpx;
		background-color:#F5F5F5 ;
	}
</style>
